<template>
  <div>
    <!-- 
      1.封装类型属性
      2.内容动态传入
      3.组件自动关闭
      4.给关闭按钮注册事件
     -->
    <!-- <Message message="hello vue3" :duration="0"></Message> -->
    <button @click="showMessage1">success</button>
    <button @click="showMessage2">error</button>
    <button @click="showMessage3">warning</button>
    <button @click="showMessage4">message</button>
  </div>
</template>

<script setup lang="ts">
// import Message from './components/Message/Message.vue';

import { onMounted } from 'vue'
import { createMessage } from './components/Message/method'

onMounted(() => {})
const showMessage1 = () => {
  createMessage({
    message: 'hello vite111',
    duration: 2000,
    type: 'success'
  })
}
const showMessage2 = () => {
  createMessage({
    message: 'hello vite222',
    duration: 2000,
    type: 'error'
  })
}
const showMessage3 = () => {
  createMessage({
    message: 'hello vite333',
    duration: 2000,
    type: 'warning'
  })
}
const showMessage4 = () => {
  createMessage({
    message: 'hello vite444',
    duration: 2000,
    type: 'message'
  })
}
</script>

<style scoped>
.message-box {
  width: max-content;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  border: 1px solid skyblue;
}
</style> 
